<script>
import Treeselect from '@riophae/vue-treeselect'
// import orgData from '@/api/orgData.js'
export default {
  name: 'ZlstTreeSelectOrg',
  components: {
    Treeselect
  },
  props: {
    value: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      loading: true,
      normalizer(node) {
        if (node.subGroups.length) {
          return {
            id: node.id,
            label: node.name,
            isDisabled: node.disabled,
            children: node.subGroups
          }
        } else {
          return {
            id: node.id,
            label: node.name,
            isDisabled: node.disabled
          }
        }
      }
    }
  },
  computed: {
    modelWrap() {
      if (this.$store.state.orgData.data) {
        return this.$store.state.orgData.data
      }
      return []
    }
  },
  mounted() {
    this.loadOptions()
  },
  methods: {
    loadOptions() {
      console.log(this.$userInfo)
      const args = ['organizations', { realm: this.$userInfo.realm }, {
        headers: {
          Authorization: 'Bearer ' + this.$userInfo.token,
          clientId: this.$userInfo.clientId,
          realm: this.$userInfo.realm
        }
      }]
      this.loading = true
      this.$store.dispatch('orgData/getOrg', args).then(() => {
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    }
  },
  render() {
    const directives = [
      {
        name: 'loading',
        value: this.loading
      }
    ]
    return (
      <treeselect
        {...{
          attrs: {
            ...this.$attrs,
            value: this.value,
            options: this.modelWrap,
            normalizer: this.normalizer,
            defaultExpandLevel: 1,
            flat: true
          },
          directives,
          on: this.$listeners,
          scopedSlots: this.$scopedSlots
        }}
      />
    )
  }
}
</script>

<style lang="scss" scoped>
  .vue-treeselect {
    font-size: 14px;
    color: #333;
  }
  /deep/ .vue-treeselect__label {
    font-weight: normal;
  }
</style>
